import type { Component, PropType } from 'vue'
import { defineComponent } from 'vue'
import type { ISchema } from '@formily/vue'
import type { Form } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/vue'
import { Cascader, DatePicker, FormGrid, FormItem, FormLayout, Input, InputNumber, Radio, Select } from '@formily/element-plus'

export default defineComponent({
  props: {
    schema: {
      type: Object as PropType<ISchema>,
    },
    components: {
      type: Object as PropType<Record<string, Component>>,
    },
    form: {
      type: Object as PropType<Form>,
    },
    scope: {
      type: Object as PropType<any>,
    },
  },
  setup(props) {
    const { SchemaField } = createSchemaField({
      components: {
        FormItem,
        DatePicker,
        Input,
        FormGrid,
        FormLayout,
        Select,
        Radio,
        InputNumber,
        Cascader,
        ...props.components,
      },
    })
    return () => <FormProvider form={props.form}><SchemaField schema={props.schema} scope={props.scope} /></FormProvider>
  },
})
